
<template>
  <el-form :model="role" :rules="rules" ref="roleForm" label-width="100px" class="demo-ruleForm">
    <el-form-item label="角色名称" prop="rolename">
      <el-input v-model="role.rolename"></el-input>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @:disabled="saveBtnDisabled" @click="saveOrUpdate()">立即创建</el-button>
      <el-button @click="resetForm('roleForm')">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import roleApi from "@/api/RoleManager.js";


export default {
  name: "save",
  data() {
    return {
        role: {
          rolename: '',
          id: ''

        },
      saveBtnDisabled: false,
      rules: {
        rolename: [
          { required: true, message: '请输入角色名称', trigger: 'blur' },
          { min: 2, max: 10, message: '长度在 2到 10个字符', trigger: 'blur' }
        ]
      }
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      if (this.$route.params && this.$route.params.id) {
        const id = this.$route.params.id;
        this.getRoleById(id);
      } else {
        this.role = {};
      }
    },

    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    saveOrUpdate() {
      if (!this.role.id) {
        this.saveRole();
      } else {
        this.updateRole();
      }
    },

    saveRole() {
      roleApi.saveRole(this.role).then((Response) => {
        //-- 弹出保存成功的确认框
        this.$message({
          message: "添加成功",
          type: "success",
        });
        //-- 页面跳转到列表页面  利用路由跳转页面
        this.$router.push({ path: "/systemManager/roleManager" });
      });
    },
    getRoleById(id) {
      roleApi.findRoleById(id).then((Response) => {
        this.role = Response.data.role;
      });
    },
    updateRole(){
      roleApi.updateRole(this.role).then((Response) => {
        console.log(this.role);
        //-- 弹出保存成功的确认框
        this.$message({
          message: "修改成功",
          type: "success",
        });
        //-- 页面跳转到列表页面  利用路由跳转页面
        this.$router.push({ path: "/systemManager/roleManager" });
      });
    }
  }
}
</script>

<style>

</style>

